<template>
  <div class="editor-plus-container">
    <el-row>
      <el-radio-group
        v-model="radio1"
        class="yuanma"
        size="medium"
        @change="radioChange"
      >
        <el-radio-button label="code">源码</el-radio-button>
        <el-radio-button label="view">视图</el-radio-button>
      </el-radio-group>

      <el-button-group v-if="radio1 == 'view'">
        <el-tooltip
          class="item"
          effect="light"
          content="插入公共模板标签"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
        >
          <el-button
            type="cyan"
            class="editor_icon1"
            @click="handleCommon"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="light"
          content="插入栏目文章列表标签"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
        >
          <el-button
            type="cyan"
            class="editor_icon2"
            @click="handleArticle"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="light"
          content="插入模板标签"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
        >
          <el-button
            type="cyan"
            class="editor_icon3"
            @click="handleTemplete"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="light"
          content="插入页面常用功能控件"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
        >
          <el-button
            type="cyan"
            class="editor_icon4"
            @click="handleUsually"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="light"
          content="插入图片新闻标签"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
        >
          <el-button
            type="cyan"
            class="editor_icon5"
            @click="handleImage"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="light"
          content="插入滚动图片标签"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
        >
          <el-button
            type="cyan"
            class="editor_icon6"
            @click="handleSCrollImg"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="light"
          content="插入栏目视频标签"
          placement="bottom"
          :open-delay="400"
          :enterable="false"
          v-if="false"
        >
          <el-button
            type="cyan"
            class="editor_icon7"
            @click="handleVideo"
          ></el-button>
        </el-tooltip>
      </el-button-group>
      <el-tooltip v-if="radio1 == 'code'" placement="top">
        <div slot="content">
          空文本的话 会生成用p包裹的标签。<br />
          "&lt;p&gt;{" 替换为 "{"<br />
          "&lt;/p&gt;}" 替换为 "}"<br />
          "}&lt;br/&gt;&lt;/p&gt;" 替换为 "}&lt;br/&gt;"
        </div>
        <i class="el-icon-question"></i>
      </el-tooltip>
    </el-row>
    <CodeEditor
      v-show="radio1 == 'code'"
      :template="template"
      @editorChange="editorChange"
      ref="codeEditor"
    ></CodeEditor>
    <Wangeditor
      v-show="radio1 == 'view'"
      :template="template"
      :imgDetail="imgDetail"
      @editorChange="editorChange"
      ref="editor"
      :enterIsP="false"
    ></Wangeditor>

    <!-- <CodeEditor v-if="radio1=='code'" v-bind:template.sync='template'></CodeEditor>
    <Wangeditor v-if="radio1=='view'" v-bind:template.sync='template' ref="editor"></Wangeditor> -->

    <!-- 插入公共模板标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleCommon"
      width="550px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div class="common">
        <div class="bottom-common">
          <el-radio-group value="true">
            <el-radio-button label="true">公共模板标签</el-radio-button>
          </el-radio-group>
          <div>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllCommonChange"
              >全部选择
            </el-checkbox>
            <el-checkbox-group
              v-model="checkedCommon"
              @change="handleCheckedCommonChange"
            >
              <el-checkbox
                v-for="common in commonOptions"
                :label="common.value"
                :key="common.id"
                :disabled="common.disable"
                >{{ common.label }}
              </el-checkbox>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
            </el-checkbox-group>
          </div>
        </div>
        <div class="bottom-tab">
          <el-radio-group v-model="bottom_tab">
            <el-radio-button label="content">文章内容标签</el-radio-button>
            <el-radio-button label="list">文章列表标签</el-radio-button>
            <el-radio-button label="index">首页点击量</el-radio-button>
          </el-radio-group>
          <!-- 文章内容标签 -->
          <div class="bottom-articleContent" v-if="bottom_tab == 'content'">
            <el-checkbox
              :indeterminate="isIndeterminate_article_content"
              v-model="checkAll_article_content"
              @change="handleCheckAllCommonArticleContentChange"
              >全部选择
            </el-checkbox>
            <el-checkbox-group
              v-model="checkedCommon_article_common"
              @change="handleCheckedCommonArticleContentChange"
            >
              <el-checkbox
                v-for="common in articleContentOptions"
                :label="common.value"
                :key="common.id"
                :disabled="common.disable"
                >{{ common.label }}
              </el-checkbox>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
            </el-checkbox-group>
          </div>

          <!-- 文章列表标签 -->
          <div class="bottom-articleList" v-if="bottom_tab == 'list'">
            <el-checkbox
              :indeterminate="isIndeterminate_article_list"
              v-model="checkAll_article_list"
              @change="handleCheckAllCommonArticleListChange"
              >全部选择
            </el-checkbox>
            <el-checkbox-group
              v-model="checkedCommon_article_list"
              @change="handleCheckedCommonArticleListChange"
            >
              <el-checkbox
                v-for="common in articleListOptions"
                :label="common.value"
                :key="common.id"
                :disabled="common.disable"
                >{{ common.label }}
              </el-checkbox>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
            </el-checkbox-group>
          </div>

          <!-- 首页标签 -->
          <div class="bottom-articleList" v-if="bottom_tab == 'index'">
            <el-checkbox
              :indeterminate="isIndeterminate_article_index"
              v-model="checkAll_article_index"
              @change="handleCheckAllCommonArticleIndexChange"
              >全部选择
            </el-checkbox>
            <el-checkbox-group
              v-model="checkedCommon_article_index"
              @change="handleCheckedCommonArticleIndexChange"
            >
              <el-checkbox
                v-for="common in articleIndexOptions"
                :label="common.value"
                :key="common.id"
                :disabled="common.disable"
                >{{ common.label }}
              </el-checkbox>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
              <i class="el-checkbox-i"></i>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="commonSure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 插入栏目文章列表标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleArticle"
      width="600px"
      append-to-body
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form ref="Articleform" :model="Articleform" :inline="true">
        <el-form-item label="显示文章数：" style="margin-bottom: 8px">
          <el-row>
            <el-col :span="12">
              <el-input v-model="Articleform.num"></el-input>
            </el-col>
            <el-col :span="6">
              <el-checkbox v-model="Articleform.pagebreak"
                >需要分页</el-checkbox
              >
            </el-col>
            <el-col :span="6" v-if="false">
              <el-checkbox v-model="Articleform.brand"
                >品牌标识专用</el-checkbox
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>
          <vxe-toolbar style="height: 40px; width: 100%">
            <template #buttons>
              <vxe-input
                v-model="filterName"
                size="small"
                type="search"
                clearable
                placeholder="栏目名称、栏目Id"
                @keyup="handleChannelQuery()"
                style="display: block; width: 90%; margin: 0 auto"
              ></vxe-input>
            </template>
          </vxe-toolbar>
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-radio-button
                v-model="value7"
                :label="true"
                v-if="false"
                :content="value7 ? '全部关闭' : '全部展开'"
                :strict="false"
                size="mini"
              ></vxe-radio-button>
            </template>
          </vxe-toolbar>
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            @cell-click="clickListRow"
          >
            <vxe-column
              tree-node
              field="name"
              :title="column.siteRow.name"
              show-overflow
            >
              <template #default="{ row }">
                <span>
                  <i
                    class="tree-node-icon fa"
                    :class="
                      $refs.xTree.isTreeExpandByRow(row)
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></i>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="bottom_r">
          <i class="el-icon-loading" v-if="loading"></i>
          <template v-if="true || showRight">
            <el-radio-group v-model="Articleform.radio">
              <el-radio
                style="display: block; margin: 5px 0"
                label="0_0_0"
                v-if="!articleRow"
                >当前栏目文章列表</el-radio
              >
              <el-radio
                style="display: block; margin: 5px 0"
                :label="`${articleRow && articleRow.channelId}_${
                  item.listId == '0' ? 0 : 1
                }_${item.listId == '0' ? 0 : item.listId}`"
                v-for="item in rightList"
                :key="item.listId"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </template>
          <template v-else>
            <span style="display: block; margin: 5px 0"
              >请点击左侧模板树，打开对应等模板。</span
            >
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="articleSure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 插入模板标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleTemplete"
      width="600px"
      append-to-body
      :before-close="handleClose"
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>

          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            @cell-click="clickListRow"
          >
            <vxe-column
              tree-node
              field="name"
              :title="column.siteRow.name"
              show-overflow
            >
              <template #default="{ row }">
                <span>
                  <i
                    class="tree-node-icon fa"
                    :class="
                      $refs.xTree.isTreeExpandByRow(row)
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></i>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="bottom_r">
          <i class="el-icon-loading" v-if="loading"></i>
          <template v-else-if="showRight">
            <vxe-toolbar v-if="false">
              <template #buttons>
                <vxe-radio-button
                  v-model="value7"
                  :label="true"
                  v-if="false"
                  :content="value7 ? '全部关闭' : '全部展开'"
                  :strict="false"
                  size="mini"
                ></vxe-radio-button>
              </template>
            </vxe-toolbar>
            <el-radio-group v-model="template_radio">
              <el-radio
                style="display: block; margin: 5px 0"
                :label="`${item.info}_${item.id}`"
                v-for="item in rightList"
                :key="item.id"
                >{{ item.info }} ({{ item.id }})</el-radio
              >
            </el-radio-group>
          </template>
          <template v-else>
            <span style="display: block; margin: 5px 0"
              >请点击左侧模板树，打开对应等模板。</span
            >
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="templateSure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 插入常用功能标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleUsually"
      width="550px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div>
        <fieldset>
          <legend>请选择通用代码标签</legend>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllUsuallyChange"
            >全部选择 <font color="red">注：</font>标注
            <font color="red">*</font>的可以用于文章内容
          </el-checkbox>
          <p></p>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="checkedUsually"
            @change="handleCheckedUsuallyChange"
          >
            <el-checkbox
              v-for="common in usuallyUsedOptions.one"
              :label="common.value"
              :key="common.id"
              :disabled="common.disable"
              >{{ common.label }}
              <font color="red" v-if="common.red">*</font>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <font color="green" v-if="common.green">*</font>
            </el-checkbox>

            <el-divider content-position="left">
              <font color="red">首页点击量</font>
            </el-divider>
            <el-checkbox
              v-for="common in usuallyUsedOptions.shouye"
              :label="common.value"
              :key="common.id"
              :disabled="common.disable"
              >{{ common.label }}
              <font color="red" v-if="common.red">*</font>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <font color="green" v-if="common.green">*</font>
            </el-checkbox>
            <template v-if="false">
              <el-divider content-position="left"
                ><span style="color: #f00">人物简介标签</span></el-divider
              >
              <el-checkbox
                v-for="common in usuallyUsedOptions.renwu"
                :label="common.value"
                :key="common.id"
                :disabled="common.disable"
                >{{ common.label }}
                <font color="red" v-if="common.red">*</font>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <font color="green" v-if="common.green">*</font>
                <font color="red" v-if="common.label == '人物头像'"
                  >注意：默认头像大小为：150*200，更改请直接修改数字！</font
                >
              </el-checkbox>
              <el-divider content-position="left"
                ><span style="color: #f00"
                  >品牌标识电子档案专用标签
                </span></el-divider
              >
              <el-checkbox
                v-for="common in usuallyUsedOptions.pinpai"
                :label="common.value"
                :key="common.id"
                :disabled="common.disable"
                >{{ common.label }}
                <font color="red" v-if="common.red">*</font>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <font color="green" v-if="common.green">*</font>
                <font color="red" v-if="common.label == '档案图片'"
                  >(400*300)</font
                >
              </el-checkbox>
            </template>
          </el-checkbox-group>
        </fieldset>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="usuallySure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 插入图片新闻标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleImageNew"
      width="680px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <el-form
        ref="ScrollImgform"
        :model="ScrollImgform"
        label-width="100px"
        class="ScrollImgform"
        size="mini"
      >
        <el-form-item label="请选择播放器：" label-width="120px">
          <el-row>
            <el-col :span="24">
              <el-radio-group v-model="ImageNewform.radioType">
                <el-radio
                  :label="item.dictLabel"
                  v-for="item in imgNewsOptions"
                  :key="item.dictValue"
                  style="margin-right: 20px"
                  >{{ item.dictValue }}</el-radio
                >
              </el-radio-group>
            </el-col>
            <el-col :span="4" v-if="false">
              <el-tooltip
                class="item"
                effect="light"
                placement="bottom"
                popper-class="radioTypeclass"
              >
                <div slot="content">
                  <ul>
                    <li>1 : 为左图右文字;</li>
                    <li>2 : 为上图下文字;</li>
                    <li>3、6 : flash类型图+标题;</li>
                    <li>4、5 : flash类型，图+内容，显示一篇文章中多图;</li>
                  </ul>
                </div>
                <el-button type="text">播放器类型说明</el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="图片新闻整体宽度" label-width="135px">
              <el-input
                v-model="ImageNewform.wholeWidth"
                @input="
                  (val) => {
                    ImageNewform.wholeWidth = val.replace(/\D/g, '');
                  }
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片新闻整体高度" label-width="135px">
              <el-input
                v-model="ImageNewform.wholeHeight"
                @input="
                  (val) => {
                    ImageNewform.wholeHeight = val.replace(/\D/g, '');
                  }
                "
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="图片宽度" label-width="80px">
              <el-input
                v-model="ImageNewform.imgWidth"
                @input="
                  (val) => {
                    ImageNewform.imgWidth = val.replace(/\D/g, '');
                  }
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="图片高度" label-width="80px">
              <el-input
                v-model="ImageNewform.imgHeight"
                @input="
                  (val) => {
                    ImageNewform.imgHeight = val.replace(/\D/g, '');
                  }
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="文字背景" label-width="80px">
              <el-row>
                <el-col :span="20">
                  <el-input v-model="ImageNewform.titleBgColor"></el-input>
                </el-col>
                <el-col :span="4">
                  <!-- <theme-picker show-alpha @change="themeChange" /> -->
                  <el-color-picker
                    v-model="ImageNewform.titleBgColor"
                    @change="themeChange"
                  ></el-color-picker>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="标题字数" label-width="80px">
              <el-input
                v-model="ImageNewform.headernum"
                @input="
                  (val) => {
                    ImageNewform.headernum = val.replace(/\D/g, '');
                  }
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内容字数" label-width="80px">
              <el-input
                v-model="ImageNewform.contentnum"
                @input="
                  (val) => {
                    ImageNewform.contentnum = val.replace(/\D/g, '');
                  }
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="height: 100%">
            <el-form-item label-width="0">
              <font color="red">两者设置0为不限制字数</font>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>

          <vxe-toolbar style="height: 40px; width: 100%; background: unset">
            <template #buttons>
              <vxe-input
                v-model="filterName"
                type="search"
                size="small"
                clearable
                placeholder="栏目名称、栏目Id"
                @keyup="handleChannelQuery()"
                style="display: block; width: 90%; margin: 0 auto"
              ></vxe-input>
            </template>
          </vxe-toolbar>
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            @cell-click="clickListRow"
          >
            <vxe-column
              tree-node
              field="name"
              :title="column.siteRow.name"
              show-overflow
            >
              <template #default="{ row }">
                <span>
                  <i
                    class="tree-node-icon fa"
                    :class="
                      $refs.xTree.isTreeExpandByRow(row)
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></i>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="bottom_r">
          <i class="el-icon-loading" v-if="loading"></i>
          <template v-else-if="showRight && !loading">
            <vxe-toolbar>
              <template #buttons>
                <vxe-radio-button
                  v-model="value7"
                  :label="true"
                  v-if="false"
                  :content="value7 ? '全部关闭' : '全部展开'"
                  :strict="false"
                  size="mini"
                ></vxe-radio-button>
              </template>
            </vxe-toolbar>

            <el-row>
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllImgNewChange"
                style="height: 28px; line-height: 28px"
                >全部选择
              </el-checkbox>
            </el-row>
            <el-row>
              <el-checkbox
                v-model="ImageNewform.checkedNewArticle"
                @change="
                  checkAll = false;
                  ImageNewform.checkedImgNewArticle = [];
                "
                >显示最新的
                <el-select
                  v-model="ImageNewform.newArticleNum"
                  placeholder="请选择"
                  size="mini"
                  class="my_article_num"
                >
                  <el-option
                    v-for="i in 6"
                    :key="i"
                    :label="i"
                    :value="i"
                    style="height: 21px; line-height: 20px"
                  >
                  </el-option>
                </el-select>
                条新闻！
              </el-checkbox>
            </el-row>

            <el-divider style="margin: 8px 0 !important"></el-divider>

            <template v-if="rightList.length > 0">
              <el-checkbox-group
                v-model="ImageNewform.checkedImgNewArticle"
                @change="handleCheckedImgNewChange"
              >
                <el-checkbox
                  style="display: block"
                  v-for="article in rightList"
                  :label="article.articleId"
                  :key="article.articleId"
                  >{{ article.header }}
                </el-checkbox>
              </el-checkbox-group>
            </template>

            <template v-else>
              <font color="green">本栏目下暂无内容！</font>
            </template>
          </template>

          <template v-else>
            <p style="height: 130px; line-height: 130px; text-align: center">
              请点击左侧栏目树选择栏目。
            </p>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="imgNewSure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 插入滚动图片标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleScrollImg"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <el-form
        ref="ScrollImgform"
        :model="ScrollImgform"
        label-width="80px"
        class="ScrollImgform"
        size="mini"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="整体宽度">
              <el-input v-model="ScrollImgform.imgWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="滚动速度(值越大速度越慢)" label-width="200px">
              <el-input v-model="ScrollImgform.Imgspeed"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="滚动方向">
          <el-radio-group v-model="ScrollImgform.scrollTarget">
            <el-radio label="0" style="margin-right: 20px">左</el-radio>
            <el-radio label="1" style="margin-right: 20px">右</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="唯一标识" style="margin-bottom: 4px">
          <el-input
            v-model="ScrollImgform.scroll_identifier"
            clearable
          ></el-input>
        </el-form-item>
        <p style="margin-bottom: 14px">
          (用于同一页面需要添加多个控件(左、右各自统计)的情形,只使用一个空间时使用默认即可)
        </p>
        <el-form-item label="上下边框图片文件名" label-width="160px">
          <el-row>
            <el-col :span="18">
              <el-input
                v-model="ScrollImgform.border_images"
                clearable
              ></el-input>
            </el-col>
            <el-col :span="6"> 不需要请置空 </el-col>
          </el-row>
        </el-form-item>
        <div class="bottom">
          <div class="bottom_l">
            <vxe-toolbar v-if="false">
              <template #buttons>
                <vxe-button @click="$refs.xTree.setAllTreeExpand(true)"
                  >全部展开</vxe-button
                >
                <vxe-button @click="$refs.xTree.clearTreeExpand()"
                  >全部关闭</vxe-button
                >
              </template>
            </vxe-toolbar>
            <vxe-toolbar style="height: 40px; width: 100%; background: unset">
              <template #buttons>
                <vxe-input
                  v-model="filterName"
                  type="search"
                  size="small"
                  clearable
                  placeholder="栏目名称、栏目Id"
                  @keyup="handleChannelQuery()"
                  style="display: block; width: 90%; margin: 0 auto"
                ></vxe-input>
              </template>
            </vxe-toolbar>
            <vxe-table
              highlight-current-row
              highlight-hover-row
              row-key
              show-overflow
              ref="xTree"
              border="inner"
              size="default"
              :data="leftList"
              :tree-config="{
                children: 'children',
                transform: false,
                parentKey: 'parentId',
                line: true,
                iconOpen: 'el-icon-remove',
                iconClose: 'el-icon-circle-plus',
              }"
              class="left-table"
              @cell-click="clickListRow"
            >
              <vxe-column
                tree-node
                field="name"
                :title="column.siteRow.name"
                show-overflow
              >
                <template #default="{ row }">
                  <span>
                    <i
                      class="tree-node-icon fa"
                      :class="
                        $refs.xTree.isTreeExpandByRow(row)
                          ? 'el-icon-folder-opened'
                          : 'el-icon-folder'
                      "
                    ></i>
                    <span style="cursor: pointer; fontsize: 12px; color: #000">
                      {{ row.name }}</span
                    >
                  </span>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div class="bottom_r">
            <i class="el-icon-loading" v-if="loading"></i>
            <template v-else-if="showRight && !loading">
              <vxe-toolbar>
                <template #buttons>
                  <vxe-radio-button
                    v-model="value7"
                    :label="true"
                    v-if="false"
                    :content="value7 ? '全部关闭' : '全部展开'"
                    :strict="false"
                    size="mini"
                  ></vxe-radio-button>
                </template>
              </vxe-toolbar>

              <el-row>
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllScrollNewsChange"
                  style="height: 28px; line-height: 28px"
                  >全部选择
                </el-checkbox>
              </el-row>

              <el-row>
                <el-checkbox
                  v-model="ScrollImgform.checkedNewNews"
                  @change="
                    checkAll = false;
                    ScrollImgform.checkedScrollImgArticle = [];
                  "
                  >显示最新的
                  <el-select
                    v-model="ScrollImgform.newArticleNum"
                    placeholder="请选择"
                    size="mini"
                    class="my_article_num"
                  >
                    <el-option
                      v-for="i in 7"
                      :key="i"
                      :label="i + 3"
                      :value="i + 3"
                      style="height: 20px; line-height: 20px"
                    >
                    </el-option>
                  </el-select>
                  条新闻！
                </el-checkbox>
              </el-row>

              <el-divider style="margin: 8px 0 !important"></el-divider>
              <template v-if="rightList.length > 0">
                <el-checkbox-group
                  v-model="ScrollImgform.checkedScrollImgArticle"
                  @change="handleCheckedScrollImgChange"
                >
                  <el-checkbox
                    style="display: block"
                    v-for="article in rightList"
                    :key="article.articleId"
                    :label="article.articleId"
                    >{{ article.header }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <template v-else>
                <font color="green">本栏目下暂无内容！</font>
              </template>
            </template>

            <template v-else>
              <p style="height: 130px; line-height: 130px; text-align: center">
                请点击左侧栏目树选择栏目。
              </p>
            </template>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="scrollImgSure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 插入栏目视频标签 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisibleVideo"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <el-form ref="videoform" :model="Videoform" label-width="100px">
        <el-form-item label="视频来源：" prop="source">
          <el-radio-group v-model="Videoform.source">
            <el-radio :label="1">栏目最新视频</el-radio>
            <el-radio :label="2">自定义视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="视频宽度：" prop="width">
              <el-input v-model="Videoform.width">
                <template slot="append">px</template></el-input
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频宽度：" prop="height">
              <el-input v-model="Videoform.height">
                <template slot="append">px</template></el-input
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button
                v-if="false"
                @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
            </template>
          </vxe-toolbar>

          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            show-overflow
            ref="xTree"
            border="inner"
            :data="leftList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            @cell-click="clickListRow"
          >
            <vxe-column
              tree-node
              field="name"
              :title="column.siteRow.name"
              show-overflow
            >
              <template #default="{ row }">
                <span>
                  <i
                    class="tree-node-icon fa"
                    :class="
                      $refs.xTree.isTreeExpandByRow(row)
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></i>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="bottom_r">
          <template> </template>

          <template> </template>
          <vxe-toolbar>
            <template #buttons>
              <vxe-radio-button
                v-model="value7"
                :label="true"
                v-if="false"
                :content="value7 ? '全部关闭' : '全部展开'"
                :strict="false"
                size="mini"
              ></vxe-radio-button>
            </template>
          </vxe-toolbar>
          <template v-if="!columnRow">
            <font color="green">请点击左侧栏目树选择栏目</font>
          </template>
          <template v-else>
            <span>请选择视频所属的文章 </span>

            <el-divider style="margin: 8px 0 !important"></el-divider>
            <i class="el-icon-loading" v-if="loading"></i>
            <el-radio-group
              v-model="Videoform.articleId"
              v-else-if="rightList.length > 0 && !loading"
              style="width: 100%"
            >
              <el-radio
                style="display: block; margin: 5px 0"
                v-for="article in rightList"
                :label="article.articleId"
                :key="article.articleId"
                >{{ article.header }}
              </el-radio>
            </el-radio-group>
            <template v-else>
              <font color="green">本栏目下暂无内容！</font>
            </template>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="videoSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Wangeditor from "@/components/wangEditor";
import CodeEditor from "@/components/codeEditor";
import { debounce, filterTree } from "@/utils";
// import { runTabifier } from "./tabifier";
import {
  getChannelListForTree,
  getChannelListAppendList,
  removeTemplate,
} from "@/api/content/clounm";

import {
  getListArticle,
  getArticleOption,
  articleCopy,
  articleMove,
  articleSetTop,
  articleSetJump,
  articleRemove,
  moveUpArticle,
  moveDownArticle,
} from "@/api/content/article";
import {
  listTemplate,
  listTemplateFile,
  delTemplate,
  delTemplateFile,
  TemplateFileInfo,
  updateFileInfo,
  addFileInfo,
} from "@/api/template/index";

import { mapState } from "vuex";
import labelOptions from "./labelOptions";
import usuallyUsedOptions from "./usuallyUsedOptions";

import beautify from "js-beautify";
import ThemePicker from "@/components/ThemePicker";
// var beautify_html = require("js-beautify").html;
export default {
  props: {
    template: String,
    cloumnRow: Object,
    imgDetail: Object,
  },
  data() {
    return {
      templateStr: "",
      radio1: "view",

      filterName: "",
      showRight: false,
      //bottom-tab  切换公共模板标签
      bottom_tab: "content",
      loading: false,
      //全部展开 全部关闭
      value7: false,
      checkAll: false,
      checkAll_article_content: false,
      checkAll_article_list: false,
      checkAll_article_index: false,
      isIndeterminate: false,
      isIndeterminate_article_content: false,
      isIndeterminate_article_list: false,
      isIndeterminate_article_index: false,
      // labelOptions: labelOptions,
      usuallyUsedOptions: usuallyUsedOptions,
      //选中的公共模板标签
      checkedCommon: [],
      checkedCommon_article_common: [],
      checkedCommon_article_list: [],
      checkedCommon_article_index: [],
      //选中的常用模板标签
      checkedUsually: [],

      //插入栏目文章列表标签
      Articleform: { pagebreak: true, brand: false, num: 15, radio: "0_0_0" },
      //插入图片新闻标签
      ImageNewform: {
        radioType: "1",
        wholeWidth: 680,
        wholeHeight: 300,
        imgWidth: 380,
        imgHeight: 285,
        titleBgColor: "0",
        headernum: 0,
        contentnum: 160,
        checkedNewArticle: false, //最新得x篇文章
        checkedImgNewArticle: [],
        newArticleNum: 6,
      },
      //插入滚动图片标签
      ScrollImgform: {
        imgWidth: 900,
        Imgspeed: 18,
        scrollTarget: "0",
        scroll_identifier: "default",
        border_images: "dying2.gif",
        checkedScrollImgArticle: [],
        checkedNewNews: false, //最新得x篇文章
        newArticleNum: 4,
      },
      //插入栏目视频标签
      Videoform: {
        width: 680,
        height: 300,
        source: 1,
      },
      leftListCache: [],
      leftList: [],
      rightList: [],
      //公共模板标签
      dialogVisibleCommon: false,
      //栏目附加文章列表 对话框
      dialogVisibleArticle: false,
      //模板列表 对话框
      dialogVisibleTemplete: false,
      //常用功能控件
      dialogVisibleUsually: false,
      //图片新闻标签 对话框
      dialogVisibleImageNew: false,
      //滚动图片标签  对话框
      dialogVisibleScrollImg: false,
      //栏目视频 对话框
      dialogVisibleVideo: false,
      //文章左侧行
      articleRow: null,
      //模板左侧行
      templeteRow: null,
      //栏目  左侧行
      columnRow: null,

      title: null,
      //右侧模板列表单选
      template_radio: null,
      //格式化代码插件   采用默认样式  官网:https://github.com/beautify-web/js-beautify  demo:https://beautifier.io/
      beautyOption: {
        indent_size: "4",
        indent_char: " ",
        max_preserve_newlines: "5",
        preserve_newlines: true,
        keep_array_indentation: false,
        break_chained_methods: false,
        indent_scripts: "normal",
        brace_style: "collapse",
        space_before_conditional: true,
        unescape_strings: false,
        jslint_happy: false,
        end_with_newline: false,
        wrap_line_length: "0",
        indent_inner_html: false,
        comma_first: false,
        e4x: false,
        indent_empty_lines: false,
      },

      imgNewsOptions: [
        {
          id: 1,
          value: 1,
          disable: false,
        },
        {
          id: 2,
          value: 2,
          disable: false,
        },
        // {
        //   id: 3,
        //   value: 3,
        //   disable: true,
        // },
        // {
        //   id: 4,
        //   value: 4,
        //   disable: true,
        // },
        // {
        //   id: 5,
        //   value: 5,
        //   disable: true,
        // },
        // {
        //   id: 6,
        //   value: 6,
        //   disable: true,
        // },
        {
          id: 7,
          value: 7,
          disable: false,
        },
        {
          id: 8,
          value: 8,
          disable: false,
        },
        // {
        //   id: 9,
        //   value: 9,
        //   disable: false,
        // },
        // {
        //   id: 10,
        //   value: 10,
        //   disable: false,
        // },
        {
          id: 11,
          value: 11,
          disable: false,
        },
      ],
    };
  },

  components: { Wangeditor, CodeEditor, ThemePicker },

  computed: {
    ...mapState(["column"]),
    commonOptions() {
      let a = labelOptions.common.filter((item, index) => {
        item.id = "common" + index;
        return item.display == true;
      });
      return a;
    },
    articleContentOptions() {
      let b = labelOptions.articleContent.filter((item, index) => {
        item.id = "content" + index;
        return item.display == true;
      });
      return b;
    },
    articleListOptions() {
      let c = labelOptions.articleList.filter((item, index) => {
        item.id = "list" + index;
        return item.display == true;
      });
      return c;
    },
    articleIndexOptions() {
      let d = labelOptions.homeLabel.filter((item, index) => {
        item.id = "home" + index;
        return item.display == true;
      });
      return d;
    },
  },

  mounted() {
    this.getDicts("img_news_lunbo").then((response) => {
      this.imgNewsOptions = response.data.filter((item) => item.status == 0);
    });
  },

  watch: {
    value7(value) {
      if (value) {
        this.$refs.xTree.setAllTreeExpand(true);
      } else {
        this.$refs.xTree.clearTreeExpand();
        this.$nextTick(() => {
          //这个和左侧站点列表 布局稍有不同，。把站点名称踢出去了。所以不需要setTreeExpand了
          // this.$refs.xTree.setTreeExpand(this.leftList[0], true);
        });
      }
    },
  },

  methods: {
    async getLeftColumnList() {
      this.filterName = "";
      this.showRight = false;
      if (this.leftListCache.length > 0) {
        this.leftList = this.leftListCache;
        return;
      }
      await getChannelListForTree({
        siteId: this.column.siteRow.siteId || null,
      }).then((res) => {
        // this.leftListCache = res.data;
        this.leftListCache = this.handleTree(res.data, "channelId").filter(
          (item) => item.parentId == this.column.siteRow.siteId
        );
        this.leftList = this.leftListCache;
        console.log("this.leftListCache: ", this.leftListCache);
      });
    },
    getArticleList() {},
    //获取编辑器里面的东西再传给页面内
    editorChange(template) {
      // this.template = template;
      // this.$emit("getTemplete", template);

      let res = beautify(template, {
        indent_size: 2,
        indent_empty_lines: false,
      });
      // let res = runTabifier(template);
      this.$emit("update:template", template);
      console.log("template: ", template);
      this.templateStr = template;
    },
    radioChange(e) {
      if (e == "view") {
        this.$refs?.editor?.editor &&
          this.$refs.editor.editor.txt.html(this.templateStr);
      } else if (e == "code") {
        this.$refs.codeEditor &&
          this.$refs.codeEditor.aceEditor.setValue(this.templateStr);
      }
    },
    //全选   公共模板
    handleCheckAllCommonChange(val) {
      this.checkedCommon = val
        ? this.commonOptions.map((item) => {
            return item.value;
          })
        : [];
      this.isIndeterminate = false;
    },
    handleCheckAllCommonArticleContentChange(val) {
      this.checkedCommon_article_common = val
        ? this.articleContentOptions.map((item) => {
            return item.value;
          })
        : [];
      this.isIndeterminate_article_content = false;
    },
    handleCheckAllCommonArticleListChange(val) {
      this.checkedCommon_article_list = val
        ? this.articleListOptions.map((item) => {
            return item.value;
          })
        : [];
      this.isIndeterminate_article_list = false;
    },
    handleCheckAllCommonArticleIndexChange(val) {
      this.checkedCommon_article_index = val
        ? this.articleIndexOptions.map((item) => {
            return item.value;
          })
        : [];
      this.isIndeterminate_article_index = false;
    },
    //全选  常用模板
    handleCheckAllUsuallyChange(val) {
      let arr = [];
      this.usuallyUsedOptions.one.map((item) => {
        arr.push(item.value);
      });
      this.usuallyUsedOptions.shouye.map((item) => {
        arr.push(item.value);
      });
      this.usuallyUsedOptions.renwu.map((item) => {
        arr.push(item.value);
      });
      this.usuallyUsedOptions.pinpai.map((item) => {
        arr.push(item.value);
      });
      this.checkedUsually = val ? arr : [];
      this.isIndeterminate = false;
    },
    //全选   图片新闻   文章列表
    handleCheckAllImgNewChange(val) {
      if (val) {
        this.ImageNewform.checkedNewArticle = false;
      }
      this.ImageNewform.checkedImgNewArticle = val
        ? this.rightList.map((item) => {
            return item.articleId;
          })
        : [];
      this.isIndeterminate = false;
    },
    handleCheckNewArticle(val) {
      if (val) return;
    },
    //全选  滚动新闻   文章列表
    handleCheckAllScrollNewsChange(val) {
      if (val) {
        this.ScrollImgform.checkedNewNews = false;
      }
      this.ScrollImgform.checkedScrollImgArticle = val
        ? this.rightList.map((item) => {
            return item.articleId;
          })
        : [];
      this.isIndeterminate = false;
    },
    //公共模板选择
    handleCheckedCommonChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.commonOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.commonOptions.length;
    },
    //公共模板文章内容
    handleCheckedCommonArticleContentChange(value) {
      let checkedCount = value.length;
      this.checkAll_article_content =
        checkedCount === this.articleContentOptions.length;
      this.isIndeterminate_article_content =
        checkedCount > 0 && checkedCount < this.articleContentOptions.length;
    },
    //公共模板文章列表
    handleCheckedCommonArticleListChange(value) {
      let checkedCount = value.length;
      this.checkAll_article_list =
        checkedCount === this.articleListOptions.length;
      this.isIndeterminate_article_list =
        checkedCount > 0 && checkedCount < this.articleListOptions.length;
    },
    //公共模板 首页标签
    handleCheckedCommonArticleIndexChange(value) {
      let checkedCount = value.length;
      this.checkAll_article_index =
        checkedCount === this.articleIndexOptions.length;
      this.isIndeterminate_article_index =
        checkedCount > 0 && checkedCount < this.articleIndexOptions.length;
    },
    //常用功能木块选择
    handleCheckedUsuallyChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.usuallyUsedOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.usuallyUsedOptions.length;
    },
    //图片新闻选择
    handleCheckedImgNewChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.rightList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.rightList.length;
    },
    //图片新闻选择
    handleCheckedScrollImgChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.rightList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.rightList.length;
    },
    //公共对话框
    handleCommon() {
      this.dialogVisibleCommon = true;
      this.title = "公共模板标签";
    },
    //附加文章列表模板 对话框
    handleArticle() {
      this.getLeftColumnList()
        .then(() => {
          this.value7 = false;
          this.dialogVisibleArticle = true;
          this.title = "栏目文章列表标签";
          this.articleRow = null;
        })
        .then(() => {
          //展开第一个节点
          // this.$nextTick(() => {
          //   this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          // });
        });
    },
    //模板对话框
    handleTemplete() {
      listTemplateFile({ siteId: this.column.siteRow.siteId })
        .then((res) => {
          this.leftList = res.data;

          // this.leftList = [
          //   {
          //     name: this.siteRow.name,
          //     siteId: this.siteRow.siteId,
          //     root: "111",
          //     channelId: 111,
          //     children: res.data,
          //   },
          // ];
        })
        .then(() => {
          this.value7 = false;
          this.dialogVisibleTemplete = true;
          this.title = "模板标签";
          this.articleRow = null;
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    //常用功能对话框
    handleUsually() {
      this.title = "页面常用功能控件";
      this.dialogVisibleUsually = true;
    },
    //图片新闻对话框
    handleImage() {
      this.getLeftColumnList()
        .then(() => {
          this.value7 = false;
          this.dialogVisibleImageNew = true;
          this.title = "图片新闻标签";
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    handleSCrollImg() {
      this.getLeftColumnList()
        .then(() => {
          this.value7 = false;
          this.dialogVisibleScrollImg = true;
          this.title = "滚动图片标签";
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    //插入栏目视频标签
    handleVideo() {
      this.getLeftColumnList()
        .then(() => {
          this.value7 = false;
          this.dialogVisibleVideo = true;
          this.title = "栏目视频标签";
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.leftList[0], true);
          });
        });
    },
    //公共模板确认
    commonSure() {
      let arr = [
        ...this.checkedCommon,
        ...this.checkedCommon_article_list,
        ...this.checkedCommon_article_common,
        ...this.checkedCommon_article_index,
      ];
      this.$refs.editor.editor.cmd.do("insertWycms", arr.join(" "));
      this.cacle();
    },
    //文章确认
    articleSure() {
      if (!this.Articleform.radio) {
        this.$confirm("文章列表标签为空，请选择后再插入？", "提示信息", {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {})
          .catch((action) => {
            this.cacle();
          });
        return;
      }
      // this.$refs.editor.editor.cmd.do(
      //   "insertWycms",
      //   `{${this.articleRow?.name || "当前栏目"}_${this.Articleform.num}_L_${
      //     this.Articleform.pagebreak ? "P" : "N"
      //   }_${
      //     this.Articleform.radio == "0"
      //       ? "0_0_0"
      //       : this.Articleform.radio == "1"
      //       ? this.articleRow?.channelId + "_0_0"
      //       : this.articleRow?.channelId + "_1_" + this.Articleform.radio
      //   }}`
      // );
      let _this = this;
      let s;
      //品牌标识专用标签
      // if (_this.Articleform.brand) {
      //   s = `{<ltbrandlogo></ltbrandlogo>(品牌标识)${
      //     this.articleRow?.name || "当前栏目"
      //   }_${this.articleRow.channelId}_${
      //     this.Articleform.radio == "0" ? 0 : 1
      //   }_${
      //     this.Articleform.radio == "0" ? 0 : this.Articleform.radio
      //   }<ltbrandlogoover></ltbrandlogoover>}`;
      // } else {
      // }
      //品牌标识专用标签
      if (_this.Articleform.brand) {
        s = `{<ltbrandlogo></ltbrandlogo>(品牌标识)${
          this.articleRow?.name || "当前栏目"
        }_${this.Articleform.radio}<ltbrandlogoover></ltbrandlogoover>}`;
      } else {
        s = `{<lt></lt>${this.articleRow?.name || "当前栏目"}_${
          this.Articleform.num
        }_L_${this.Articleform.pagebreak ? "P" : "N"}_${
          this.Articleform.radio
        }<ltover></ltover>}`;
      }
      this.$refs.editor.editor.cmd.do("insertWycms", `${s}`);
      this.cacle();
    },
    //模板确认
    templateSure() {
      let s = `{<slt></slt>${this.template_radio}<sltover></sltover>}`;
      this.$refs.editor.editor.cmd.do("insertWycms", `${s}`);
      this.cacle();
    },
    //常用功能确认
    usuallySure() {
      this.$refs.editor.editor.cmd.do(
        "insertWycms",
        this.checkedUsually.join("")
      );
      this.cacle();
    },
    //图片新闻确认
    imgNewSure() {
      let form = this.ImageNewform;
      if (form.checkedImgNewArticle.length == 0 && !form.checkedNewArticle) {
        this.$alert("请选择图片新闻！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (form.newArticleNum > 6 || form.checkedImgNewArticle.length > 6) {
        this.$alert(
          "图片新闻目前最大可显示6篇文章，您选择的文章数过多，系统已经自动重置为6篇!",
          "提示",
          {
            confirmButtonText: "确定",
            callback: (action) => {
              form.newArticleNum = 6;
              form.checkedImgNewArticle = form.checkedImgNewArticle.slice(0, 6);
            },
          }
        );
        return;
      }

      // "{<imgn></imgn>" + s +","+articelNum+"_"+wholeWidth+"_"+wholeHeight+"_"+parent.document.getElementById("imgWidth").value+"_"+parent.document.getElementById("imgHeight").value+"_"+channelid+"_"+radioType+"_"+headernum+"_"+contentnum+"_"+titleBgColor+"<imgnover></imgnover>}"
      var s;

      // 显示最新的几篇文章
      if (form.checkedNewArticle) {
        s = `{<imgn></imgn>图片新闻,0,${form.newArticleNum}_${form.wholeWidth}_${form.wholeHeight}_${form.imgWidth}_${form.imgHeight}_${this.columnRow.channelId}_${form.radioType}_${form.headernum}_${form.contentnum}_${form.titleBgColor}<imgnover></imgnover>}`;
      } else {
        s = `{<imgn></imgn>图片新闻,${form.checkedImgNewArticle.join(",")}_${
          form.wholeWidth
        }_${form.wholeHeight}_${form.imgWidth}_${form.imgHeight}_${
          this.columnRow.channelId
        }_${form.radioType}_${form.headernum}_${form.contentnum}_${
          form.titleBgColor
        }<imgnover></imgnover>}`;
      }
      this.cacle();
      this.$refs.editor.editor.cmd.do("insertWycms", `${s}`);
    },
    //滚动图片确认
    scrollImgSure() {
      let form = this.ScrollImgform;
      console.log("🚀 ~ file: index.vue:1207 ~ scrollImgSure ~ form", form);
      // {<imgs></imgs>滚动图片,0,6_900_18_10612_0_default_dying2.gif<imgsover></imgsover>}<br />
      // <br />
      // {<imgs></imgs>滚动图片,283080,283078,283076,283075,283074,283073,283072,283071_900_18_10612_0_default_dying2.gif<imgsover></imgsover>}<br />
      // <br />
      // {<imgs></imgs>滚动图片,0,6_900_18_10612_0_default_dying2.gif<imgsover></imgsover>}

      // <el-col :span='6'>
      // <el-checkbox v-model="ScrollImgform.checkedNewArticle">显示最新的
      //       <el-select v-model="ScrollImgform.newArticleNum" placeholder="请选择" size='mini' class="my_article_num">
      //         <el-option v-for="i in 6" :key="i" :label=" i" :value="i" style="height: 21px;    line-height: 20px;">
      //         </el-option>
      //       </el-select> 条新闻！
      //     </el-checkbox>
      //   </el-col>

      // </el-row>
      // <el-divider style="margin: 8px 0 !important"></el-divider>
      // <el-checkbox-group v-model="ScrollImgform.checkedScrollImgArticle"

      if (form.checkedScrollImgArticle.length == 0 && !form.checkedNewNews) {
        this.$alert("请选择文章！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      var str;

      // if (this.rightList.length > 4) {
      if (form.checkedScrollImgArticle.length < 4 || form.newArticleNum <= 4) {
        console.log(
          "🚀 ~ file: index.vue:1264 ~ scrollImgSure ~ form.newArticleNum <= 4",
          form.newArticleNum < 3
        );
      }
      if (
        form.checkedScrollImgArticle.length < 4 &&
        form.checkedNewNews &&
        form.newArticleNum < 3
      ) {
        this.$alert("所选的文章数量不能少于4篇，请重选!", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }

      if (form.checkedScrollImgArticle.length >= 4) {
        str = form.checkedScrollImgArticle.join(",");
      } else if (form.checkedNewNews) {
        str = `0,${form.newArticleNum}`;
      }
      // }
      if (!form.scroll_identifier) form.scroll_identifier = "default";
      if (form.border_images == null || form.border_images == "")
        form.border_images = "0";

      let s = `{<imgs></imgs>滚动图片,${str}_${form.imgWidth}_${form.Imgspeed}_${this.columnRow.channelId}_${form.scrollTarget}_${form.scroll_identifier}_${form.border_images}<imgsover></imgsover>}`;

      this.$refs.editor.editor.cmd.do("insertWycms", `${s}`);
      this.cacle();
    },
    //视频确认
    videoSure() {
      let form = this.Videoform;
      var s;
      if (form.source == 2) {
        if (!form.articleId) {
          this.$alert("您选择自定义视频，请选择一篇包含视频的文章！", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
        s = `{<medias></medias>栏目视频_2_${form.articleId}_${form.width}_${form.height}<mediasover></mediasover>}`;
      } else if (form.source == 1) {
        s = `{<medias></medias>栏目视频_1_${this.columnRow.channelId}_${form.width}_${form.height}<mediasover></mediasover>}`;
      }
      this.$refs.editor.editor.cmd.do("insertWycms", `${s}`);
      this.cacle();
    },
    //获取栏目列表
    async clickListRow({ row, triggerTreeNode }) {
      console.log("row, triggerTreeNode : ", row, triggerTreeNode);
      // 点击的是展开 收缩
      if (triggerTreeNode) return;
      this.rightList = [];
      this.loading = true;
      this.showRight = false;
      //点击栏目   附加文章列表模板
      if (this.dialogVisibleArticle) {
        this.articleRow = row;
        await this.haldleClickArticle();
      } else if (this.dialogVisibleTemplete) {
        this.templeteRow = row;
        //点击模板列表
        await this.haldleClickTempleteFile();
      } else if (this.dialogVisibleImageNew) {
        //点击栏目   获取栏目 的文章列表
        this.columnRow = row;
        await this.handleClickGetColumnArticle();
      } else if (this.dialogVisibleScrollImg) {
        //点击 栏目    获取栏目 的文章列表
        this.columnRow = row;

        await this.handleClickGetColumnArticle();
      } else if (this.dialogVisibleVideo) {
        //点击 栏目视频   获取栏目 的文章列表
        this.columnRow = row;
        await this.handleClickGetColumnArticle();
      }
      this.showRight = true;
    },

    //点击栏目 获取栏目  附加  文章列表模板
    haldleClickArticle() {
      this.rightList = [];
      getChannelListAppendList(this.articleRow.channelId).then((res) => {
        this.loading = false;
        let obj = {
          listId: "0",
          name: "默认文章列表",
        };
        res.data.push(obj);
        this.rightList = res?.data || [];
        // ${articleRow&&articleRow.channelId}_${item.listId=='0'?0:1}_${item.listId=='0'?0:item.listId}`
        this.Articleform.radio = `${this.articleRow?.channelId}_0_0`;
      });
    },

    //点击模板列表文件夹
    haldleClickTempleteFile() {
      this.rightList = [];
      listTemplate({ parentId: this.templeteRow.id }).then((res) => {
        this.loading = false;
        this.rightList = res?.data || [];
      });
    },
    //点击栏目。获取栏目   文章列表
    async handleClickGetColumnArticle() {
      this.rightList = [];
      await getListArticle({
        showType: 1,
        channelId: this.columnRow.channelId,
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.rightList = res.data?.list || [];
        }
      });
    },
    handleClose(done) {
      this.$refs.xTree && this.$refs.xTree.clearCheckboxRow();
      this.cacle();
      done();
    },
    themeChange(val) {
      this.ImageNewform.titleBgColor = val;
    },
    cacle() {
      this.dialogVisibleCommon = false;
      this.dialogVisibleArticle = false;
      this.dialogVisibleTemplete = false;
      this.dialogVisibleUsually = false;
      this.dialogVisibleImageNew = false;
      this.dialogVisibleVideo = false;
      this.dialogVisibleScrollImg = false;

      //取消 栏目选择

      //全选按钮
      this.isIndeterminate = false;
      this.isIndeterminate_article_content = false;
      this.isIndeterminate_article_list = false;
      //共用  全选按钮
      this.checkAll = false;
      this.checkAll_article_content = false;
      this.checkAll_article_list = false;
      //选中的公共标签
      this.checkedCommon = [];
      this.checkedCommon_article_list = [];
      this.checkedCommon_article_common = [];
      //选中的常用标签
      this.checkedUsually = [];

      this.rightList = [];
      this.articleRow = null;
      this.templeteRow = null;
      this.columnRow = null;
      this.reset();
    },
    reset() {
      this.Articleform = {
        num: 15,
        pagebreak: true,
        brand: false,
        radio: "0_0_0",
      };
      this.ImageNewform = {
        radioType: 1,
        wholeWidth: 680,
        wholeHeight: 300,
        imgWidth: 380,
        imgHeight: 285,
        titleBgColor: "0",
        headernum: 0,
        contentnum: 160,
        checkedNewArticle: false,
        checkedImgNewArticle: [],
        newArticleNum: 6,
      };
      this.ScrollImgform = {
        imgWidth: 900,
        Imgspeed: 18,
        scrollTarget: "0",
        scroll_identifier: "default",
        border_images: "dying2.gif",
        checkedScrollImgArticle: [],
        checkedNewNews: false, //最新得x篇文章
        newArticleNum: 4,
      };
      this.Videoform = {
        source: 1,
        width: 680,
        height: 300,
        radio: null,
      };
    },

    handleChannelQuery: debounce(function () {
      this.channelQuery();
    }, 600),
    //
    channelQuery() {
      new Promise((resolve, reject) => {
        // let aa = this.leftListCache.filter((item) => {
        //   return this.filterName
        //     ? item.name.indexOf(this.filterName.trim().toLowerCase()) > -1 ||
        //         String(item.channelId).indexOf(
        //           this.filterName.trim().toLowerCase()
        //         ) > -1
        //     : true;
        // });
        // // this.siteRow.children = this.handleTree(aa, "channelId");
        // // this.siteRow.root = "111";
        // this.leftList = this.handleTree(aa, "channelId").filter(
        //   (item) => item.parentId == this.column.siteRow.siteId
        // );
        // 这块父元素直接现在的列表，没有顶级root
        let obj = filterTree(
          { children: this.leftListCache },
          this.filterName,
          ["channelId", "name"]
        );
        console.log("obj: ", obj);

        this.leftList = obj?.children || [];

        resolve();
      });
      // .then((res) => {
      //   console.log(res);
      // })
      // .catch((e) => {
      //   this.$alert("栏目列表获取失败，请联系管理员", "提示", {
      //     confirmButtonText: "确定",
      //   });
      // });
    },
  },
};
</script>

<style scoped lang="scss">
.editor-plus-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bottom {
  // height: 500px;
  height: 50vh;
  // min-height: 50vh;
  // max-height: 60vh;

  display: flex;
  .bottom_l {
    // overflow: auto;
    width: 240px;
    min-width: 240px;
    height: 100%;
    background: #fffbf0 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
    }
  }
  .bottom_r {
    flex: 1;
    overflow: auto;
    background: #fbfeff;
    padding: 0 30px;
    .my_article_num {
      ::v-deep .el-input {
        width: 60px;
      }
    }
    .el-divider--horizontal {
      margin: 10px 0;
    }
  }
}
.common {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    line-height: 36px;
    ::v-deep .el-checkbox__label {
      width: 100%;
      white-space: pre-wrap;
      vertical-align: middle;
    }
  }
  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .el-checkbox {
      width: 30%;
      margin: 0;
      // height: 36px;
      ::v-deep .el-checkbox__label {
        width: 100%;
        white-space: pre-wrap;
        vertical-align: middle;
      }
    }
    .el-checkbox-i {
      width: 30%;
    }
  }
  .bottom-common {
  }
  .bottom-tab {
    .bottom-articleContent {
    }
    .bottom-articleList {
    }
  }
}

.radioTypeclass {
  margin: 0 0 0 10px;
  display: inline-block;
  ul li {
    line-height: 20px;
    font-size: 14px;
  }
}
.ImageNewform {
  .el-form-item {
    margin-bottom: 6px;
  }
}
</style>
